<template>
  <div>
    <div class="f ac pb10">
      <div class="nowrap mr5 b">类型：</div>
      <div class="g1aada7 rds2 pl5 pr5 pt2 pb2" style="border:1px solid #1aada7;">纯文本</div>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">标题：</div>
      <Input :value="item.label" @on-change="e=>changeField(e, 'label')" />
    </div>
    <div class="pt10 pb10 f">
      <div class="nowrap mr15 b">是否加粗</div>
      <RadioGroup :value="item.fontWeight" @on-change="e=>changeField(e, 'fontWeight')" >
        <div class="f">
          <div class="mr10"><Radio label="400">否</Radio></div>
          <div class="mr10"><Radio label="700">是</Radio></div>
        </div>
      </RadioGroup>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">字体大小：</div>
      <Input :value="item.fontSize" @on-change="e=>changeField(e, 'fontSize')" v-int v-min="0" v-max="200" />
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">字体颜色：</div>
      <ColorPicker :value="item.color" @on-change="e=>changeField(e, 'color')" style="width:100%;" />
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">上边距：</div>
      <InputNumber :min="0" :max="200" :step="1" :value="item.paddingTop" style="width:100%;" @on-change="e=>changeField(e, 'paddingTop')"></InputNumber>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">右边距：</div>
      <InputNumber :min="0" :max="200" :step="1" :value="item.paddingRight" style="width:100%;" @on-change="e=>changeField(e, 'paddingRight')"></InputNumber>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">下边距：</div>
      <InputNumber :min="0" :max="200" :step="1" :value="item.paddingBottom" style="width:100%;" @on-change="e=>changeField(e, 'paddingBottom')"></InputNumber>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">左边距：</div>
      <InputNumber :min="0" :max="200" :step="1" :value="item.paddingLeft" style="width:100%;" @on-change="e=>changeField(e, 'paddingLeft')"></InputNumber>
    </div>
    <div class="pt10 pb10 f">
      <div class="nowrap mr5 b">是否显示展开箭头：</div>
      <i-switch :value="item.isShowSpread" @on-change="e=>changeField(e, 'isShowSpread')">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </i-switch>
    </div>
    <div v-if="item.isShowSpread" class="pt10 pb10">
      <div class="nowrap mr5 b">关联展开收起字段<span class="fw4">(举例：name,age)</span>:</div>
      <Input type="textarea" :autosize="{ minRows: 3 }" placeholder="" :value="item.spreadField"  style="width:100%;" class="" @on-change="e=>changeField(e, 'spreadField')" />
    </div>
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped>
</style>